<template>
  <div class="setting">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="角色信息" name="role">
        <el-button type="primary" @click="addRole">新增角色</el-button>
        <el-table :data="tableData">
          <el-table-column label="序号">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="角色名称"></el-table-column>
          <el-table-column
            prop="description"
            label="角色描述"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text">分配权限</el-button>
              <el-button type="text" @click="editRole(scope.row)"
                >修改</el-button
              >
              <el-button type="text" @click="removeRole(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="page">
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="page.page"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="page.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="公司信息" name="company">
        <el-form :model="form" label-width="120px">
          <el-form-item label="企业名称"
            ><el-input disabled v-model="form.name"></el-input
          ></el-form-item>
          <el-form-item label="公司地址"
            ><el-input disabled v-model="form.companyAddress"></el-input
          ></el-form-item>
          <el-form-item label="公司电话"
            ><el-input disabled v-model="form.companyPhone"></el-input
          ></el-form-item>
          <el-form-item label="邮箱"
            ><el-input disabled v-model="form.mailbox"></el-input
          ></el-form-item>
          <el-form-item label="备注"
            ><el-input disabled v-model="form.remarks"></el-input
          ></el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <!-- 新增弹框 -->
    <!-- <add ref="add" :value="isShow" @input="val => (isShow = val)"></add> -->
    <!-- <add v-model="isShow"></add> -->
    <add
      :value.sync="isShow"
      :tableData="tableData"
      @getRoleList="getRoleList"
      ref="add"
    ></add>
  </div>
</template>

<script>
import { mapState } from 'vuex'

// 导入获取角色列表的信息
import { sysRole, companyInfo, delRole } from '@/api/setting'
export default {
  components: {
    add: () => import('./addRole')
  },
  data () {
    return {
      // 是否显示弹框
      isShow: false,
      // 分页器数据
      page: {
        page: 1,
        total: 20,
        pagesize: 1
      },
      // tab栏选中项
      activeName: 'role',
      tableData: [],
      // 表单数据源
      form: {}
    }
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  created () {
    this.getRoleList()
  },
  methods: {
    // 删除角色
    removeRole (row) {
      this.$confirm('此操作将永久删除，是否继续', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async () => {
          const res = await delRole(row.id)
          this.$message.success('删除成功')
          if (this.tableData.length <= 1) {
            this.page.page--
          }
          this.getRoleList()
        })
        .catch(() => {})
    },
    // 修改角色
    editRole (row) {
      this.isShow = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 新增角色
    addRole () {
      // this.$refs.add.isShow = true
      this.isShow = true
      this.$refs.add.mode = 'add'
    },
    // 页容量改变时
    sizeChange (size) {
      this.page.pagesize = size
      this.getRoleList()
    },
    // 当前页发生变化时
    currentChange (page) {
      this.page.page = page
      this.getRoleList()
    },
    // 获取企业信息
    async getcompanyData () {
      if (this.form.name) {
        return
      }
      // const res = await companyInfo(this.userInfo.companyId)
      const res = await companyInfo(this.$store.getters.userInfo.companyId)
      console.log(res)
      this.form = res
    },
    // tabs点击切换事件
    handleClick (tab) {
      this.activeName = tab.name
      if (tab.name === 'company') {
        this.getcompanyData()
      }
      console.log(this.userInfo)
    },
    // 获取所有角色列表
    async getRoleList () {
      const res = await sysRole(this.page)
      // console.log(res)
      this.tableData = res.rows
      this.page.total = res.total
    }
  }
}
</script>

<style lang="scss" scoped>
.setting {
  padding: 20px;
  .page {
    text-align: center;
    margin-top: 20px;
  }
}
</style>
